<template>
	<view style="width: 100%;height: 100%;">
		<zkx
			@onDragMove='onCardDragMove'
			@onDragStop='onCardDragStop'
			@onThrowDone='onCardThrowDone'
			:cardWidth="310" 
			:cardHeight="130"
			:throwTriggerDistance="30"
			dragDirection="horizontal"
			:hasShadow="true"
		>
			<view slot="firstCard" style="width:100%;height:100%;">
				<view v-if="cards[0]" class="zhihuCard">
					<view>{{cards[0].title}}</view>
					<view>
						<view>{{cards[0].followcount}} 关注</view>
						<view>
							<button disabled="">忽略</button>
							<button type="primary">回答</button>
						</view>
					</view>
				</view>
			</view>
			<view slot="secondCard" style="width:100%;height:100%;">
				<view v-if="cards[1]" class="zhihuCard">
					<view>{{cards[1].title}}</view>
					<view>
						<view>{{cards[1].followcount}} 关注</view>
						<view>
							<button disabled="">忽略</button>
							<button type="primary">回答</button>
						</view>
					</view>
				</view>
			</view>
			<view slot="thirdCard" style="width:100%;height:100%;">
				<view v-if="cards[2]" class="zhihuCard">
					<view>{{cards[2].title}}</view>
					<view>
						<view>{{cards[2].followcount}} 关注</view>
						<view>
							<button disabled="">忽略</button>
							<button type="primary">回答</button>
						</view>
					</view>
				</view>
			</view>
		</zkx>
	</view>
</template>

<script>
	import zkx from "../../components/ezflycard.vue"
	export default {
		components:{
			zkx
		},
		data() {
			return {
				title: 'Hello',
				cards:[
					{
						title:"曾国藩、中国传统文化的集大成者，官场楷模，千古第一完人。",
						followcount:59
					},
					{
						title:"我们注定要失去我们所爱的人,要不然怎么会知道他们对我们有多么的重要",
						followcount:13
					},
					{
						title:"she was the most beautiful woman",
						followcount:29
					},
					{
						title:"万水千山，因你不过毫厘。",
						followcount:6
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			onCardDragMove(obj){
				
			},
			onCardDragStop(obj){
				
			},
			onCardThrowDone(obj){
				this.cards.splice(0,1);
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	view{
		box-sizing: border-box;
	}
	.zhihuCard{
		padding: 10px;
	}
	.zhihuCard:nth-child(1)
	{
		font-size: 18px;
	}
	.zhihuCard>view:nth-child(2)
	{
		display: flex;
		position: absolute;
		width: 100%;
		left:0px;
		bottom: 10px;
		padding:0px 10px;
	}
	.zhihuCard>view:nth-child(2)>view:nth-child(1)
	{
		flex:1;
		font-size: 14px;
		color: #666;
	}
	.zhihuCard>view:nth-child(2)>view:nth-child(2)
	{
		display: flex;
	}
	.zhihuCard>view:nth-child(2)>view:nth-child(2)>button:nth-child(2)
	{
		margin-left: 5px;
	}
	button
	{
		height: 24px;
		line-height: 24px;
		font-size: 12px;
	}
</style>
